var image = 0;
var images = new Array();
    $(function() {
        
        var url = BASE_URL+'banners/image_selector';
        
        var content = $("#content").val();
        
        content = content.split(',');
        
        $.each(content,function(i, v){
            if(v){
                images.push(v);
            }
        });
        
        $.post(url,{par:1},function(data){
            $('td[cin="content"]').append(data.html);
            init_image_selector();
            
        },'json');
        
        
        o.ajax_submit({
            index:'form',
            dataType:'json',
            beforeSubmit:function(){
                var res = get_banner_ids();
                $("#content").val(res.str);
                $(".preloader-1").show();
                if(res.length < 3 ){
                    alert('Please add at least 3 or more pictures to your banner');
                    $(".preloader-1").hide();
                    return false;
                }
            },
            success:function(d){
                window.location = d.redirect;
            }
        });
        
        $(".images-wrapper").css('height','auto');
        
    });
    
    function init_image_selector(){
        $(".image").mouseover(function(){
            image = $(this).attr('index');
        })
        
        $(".page").mouseover(function(){
            image = $(this).attr('index');
        })
        
        
        
        $( "#images" ).sortable();
        $( "#banner-images" ).sortable();
        $( "#pages" ).sortable();
        
        $( ".banner-images-wrapper" ).droppable({
            drop: function( event, ui ) {
                
                if(!in_banner()){
                    $( "#banner-images" ).append(get_image());
                    $('#banner-images').css('height','auto');
                    set_delete_banner(image);
                }
            }
        });
        
        set_banner_images(images);
        
        $('input[name="delete"]').click(function(){
            var index = $(this).attr('index');
            $('li[index="'+index+'"]').hide(500,function(){
                $(this).remove();
            });
        });
        
    }
    
    function set_banner_images(ids){
        $.each(ids,function(i, v){
            image = v;
            $( "#banner-images" ).append(get_image());
            set_delete_banner(v);
            
        });
    }
    
    function set_delete_banner(index){
        $('li[index="'+index+'"]').click(function(){
            $(".del_image").attr('index',index).val('Delete: '+index)
        });
    }
    
    function get_image(){
        var id = image;
         
        var obj = id.split('_');
        var ret = '';
        
        ret += '<li index="'+id+'">';
        
        switch(obj[0]){
            case'page':
                var val = $('span[index="'+id+'"]').attr('value');
                ret += '<span index="'+id+'">'+val+'</span>';
                break;
            default:
                var src = $('img[index='+id+']').attr('src');
                ret += '<img index="'+id+'" src="'+src+'" class="absolute">';
                break;
        }
        
        ret += '</li>';
        return ret;
    }
    
    function in_banner(){
        var ret = false;
        $("#banner-images li").each(function(){
            var index = $(this).attr('index');
            if(index==image){
                ret = true;
            }
        });
        return ret;
    }
    
    function get_banner_ids(){
        var data = new Array();
        var str = '';
        var c = 0;
        $("#banner-images li").each(function(){
            var index = $(this).attr('index');
            if(!o.in_array(index, data)){
                data.push(index);
                str += (c>0)?','+index:index;
                c++;
            }
            
        });
        return {data:data,str:str,length:data.length};
    }
    